﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="coretest.aspx.cs" Inherits="coretest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
            .classes1
            {
                background: black;   
            }
            
            .classes2
            {
                font: black;
            }
            
            .classname
            {
                background: black;
                font: black;
            }
            
            .byclassname
            {
                visibility: hidden;
            }
            
            #foregroundcolor
            {
                color: #ffffff;
            }
    </style>
    <script type="text/javascript" src="/scripts/NinJa.js"></script>
    <script type="text/javascript">
        Page.OnLoad.Add(function () {
            if ($Content("ated") == $Content("usc_ated")) {
                $Content("obf_usc_ated").Content("Referencing obfuscation works.");
            }

            $Div("parent_pdiv.child_div").BackgroundColor(Colors.Black).ForegroundColor(Colors.White);
            $Div("parent_pdiv.child_div").Content("Child referencing works");

            $Content("addelement").AddElement(new Anchor().Text("AddElement ok"));
            $Content("addelements").AddElements(["Raw text ", new Span().Text("Span text "), "AddElements ok"]);
            $Content("backgroundcolor").BackgroundColor(Colors.Blue);
            $Content("bold").Bold(true);
            $Content("bold2").Bold(false);
            $Content("classes").Classes.Remove("classes1");
            $Content("classname").ClassName("");
            $Content("collapsed1").Collapsed(true);
            $Content("collapsed2").Collapsed(false);
            $Content("cursor").Cursor(Cursor.Progress);
            if (!$Content("displayed").Displayed()) {
                $Content("displayed").Content("Displayed ok");
            }
            Page.ElementsByClassName("byclassname").ForEach(function (c) { $Span(c).Visible(true); });
            $Content("disabled").Enabled(false);
            $Element("enabled").Enabled(true);
            $Content("foregroundcolor").ForegroundColor(Colors.Blue);
            if ($Content("height").Height() == 8) {
                $Content("height").Height(18);
            }
            $Content("hscrollpos").HorizontalScrollPosition(300);
            $Content("hscrolltoel").HorizontalScrollToElement($Element("hscrollto"));
            $Content("insertelement").InsertElement(1, " between ");
            $Content("insertelements").InsertElements(2, ["4,", "5,", "6,"]);
            $Content("insertafter").InsertElementAfter("Right", $Element("middle1"));
            $Content("insertbefore").InsertElementBefore("Left", $Element("middle2"));
            $Content("italic").Italic(true);
            if ($Content("notitalic").Italic()) {
                $Content("notitalic").Italic(false);
            }
            if ($Content("layoutwidthheight").LayoutWidth() == 190 &&
                $Content("layoutwidthheight").LayoutHeight() == 90) {
                $Content("layoutwidthheight").Content("LayoutWidth and LayoutHeight ok");
            }
            $Content("movelementsto1").MoveElementsTo($Content("movelementsto2"));
            $Content("opacity").Opacity(.5);
            $Content("position").Position("relative");
            $Content("removeelement").RemoveElement($Element("not1"));
            $Content("removeelements").RemoveElements([$Element("not2"), $Element("not3")]);
            $Content("style").Style(Style.Color, Colors.White);
            $Content("swapelements").SwapElements($Element("swap1"), $Element("swap2"));
            $Content("toggle1").Toggle();
            $Content("toggle2").Toggle();
            $Content("toggle3").Toggle("Visible");
            $Content("toggle4").Toggle("BackgroundColor", ["orange", "blue", "white"]);
            $Content("tooltip").ToolTip("ToolTip Ok");
            if (!$Content("underline").Underline()) {
                $Content("underline").Underline(true);
            }

            if ($Content("notunderline").Underline()) {
                $Content("notunderline").Underline(false)
            }

            $Content("vscrollpos").VerticalScrollPosition(500);
            $Content("vscrolltoel").VerticalScrollToElement($Element("vscrollto"));
            $Content("visible").Visible(true);
            if ($Content("width").Width() == 10) {
                $Content("width").Width(100);
            }

            if ($Content("x").X() == -400) {
                $Content("x").X(0);
            }

            if ($Content("y").Y() == -10400) {
                $Content("y").Y(0);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>Test Referencing</h1>
    <ol>
    <li><div id="obf_usc_ated"></div></li>
    <li><div id="child_div">Untouched child div</div></li>
    <li><div id="parent_pdiv">
        <div id="child_div"></div>
    </div></li>
    </ol>
    <h1>Testing element functions</h1>
    <ol>
    <li><div id="addelement"></div></li>
    <li><div id="addelements"></div></li>
    <li><div id="backgroundcolor" style="color: White">BackgroundColor ok</div></li>
    <li><div id="bold">Should be bold.</div></li>
    <li><div id="bold2" style="font-weight: bold">Should not be bold.</div></li>
    <li><div class="classes1 classes2" id="classes">Classes ok.</div></li>
    <li><div class="classname" id="classname">ClassName ok.</div><div id="collapsed1">Collapsed NOT OK.</div></li>
    <li><div id="collapsed2" style="display: none">Collapsed OK</div></li>
    <li><div id="cursor">Cursor should be "waiting" icon.</div></li>
    <li><div id="displayed"></div></li>
    <li><span class="byclassname">Elements</span>
    <span class="byclassname">ByClass</span>
    <span class="byclassname">Name is ok.</span></li>
    <li><div id="disabled"><a onclick="javascript: alert('Cow');">Everything should</a> <input type="text" value="be disabled" /></div></li>
    <li><input disabled="disabled" type="text" id="enabled" /><label for="enabled">Should be enabled</label></li>
    <li><div id="foregroundcolor">ForegroundColor ok</div></li>
    <li><div id="height" style="height: 8px; overflow: hidden">Height ok</div></li>
    <li><div id="hscrollpos" style="white-space: nowrap; width: 200px; overflow: auto">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HorizontalScrollPosition&nbsp;ok</div></li>
    <li><div id="hscrolltoel" style="white-space: nowrap; width: 400px; overflow: auto">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="hscrollto">HorizontalScrollEoElement&nbsp;ok</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></li>
    <li><div id="insertelement"><span>InsertElement</span><span>here ok.</span></div></li>
    <li><div id="insertelements"><span>InsertElement</span><span>1, 2, 3,</span><span>7, 8, 9 ok</span></div></li>
    <li><div id="insertafter"><span>Left</span><span id="middle1">Middle</span></div></li>
    <li><div id="insertbefore"><span id="middle2">Middle</span><span>Right</span></div></li>
    <li><div id="italic">Should be italic</div></li>
    <li><div id="notitalic" style="font-style: italic">Should not be italic</div></li>
    <li><div id="layoutwidthheight" style="border: black solid 20px; width: 150px; height: 50px;">LayoutWidth and LayoutHeight WRONG</div></li>
    <li><div id="movelementsto1" style="border: 1px solid red"><a>Elements</a> <span>should be </span> <b>in green border.</b></div></li>
    <li><div id="movelementsto2" style="border: 1px solid green"></div></li>
    <li><div id="opacity">Transparent div tag.</div></li>
    <li><div id="position" style="left: 100px">Positioned relative to the right.</div></li>
    <li><div id="removeelement">RemoveElement <span id="not1">NOT</span> OK</div></li>
    <li><div id="removeelements">RemoveElements <span id="not2">IS</span><span id="not3">NOT</span> OK</div></li>
    <li><div id="style" style="background: blue; color: Blue">Style OK</div></li>
    <li><div id="swapelements"><span id="swap1">is ok</span><span id="swap2">SwapElements </span></div></li>
    <li>
        <div id="toggle1" style="display: none">Toggle OK</div>
        <div id="toggle2" style="">Toggle NOT OK</div>
    </li>
    <li><div id="toggle3" style="visibility: hidden">Toggle3 OK</div></li>
    <li><div id="toggle4" style="background: blue; color: Blue;">Toggle4 OK</div></li>
    <li><div id="tooltip">Hover over this to get a tooltip</div></li>
    <li><div id="underline">Should be underlined</div></li>
    <li><div id="notunderline" style="text-decoration: underline">Should not be underlined</div></li>
    <li><div id="vscrollpos" style="height: 100px; width: 200px; overflow: auto"><br /><br /><br /><br /><br /><br /><br /><br />VerticalScrollPosition ok</div></li>
    <li><div id="vscrolltoel" style="height: 100px; width: 200px; overflow: auto"><br /><br /><br /><br /><br /><br /><br /><br /><br /><span id="vscrollto">VerticalScrollEoElement&nbsp;ok</span><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></li>
    <li><div id="visible" style="visibility: hidden">Visible Ok</div></li>
    <li><div id="width" style="width: 10px; overflow: hidden; white-space: nowrap">Width ok</div></li>
    <li><div id="x" style="position: relative; left: -400px">X ok</div></li>
    <li><div id="y" style="position: relative; top: -10400px">Y ok</div></li>
    </ol>
    </form>
</body>
</html>